<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/animate.min.css">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/media.css">
    <link id="skipWeb" rel="stylesheet" href="./css/webSkipdefault.css">
</head>

<body>
    <div id="process"><p></p></div>
    <header id="header">
        <a href="./index.html"><img src="./img/VEGA.png" alt=""></a>
        <select> 
            <option value="webSkipdefault">默认主题</option>
            <option value="webSkipWood" >木质主题</option>
            <option value="webSkipFlower">花朵主题</option>
        </select>
    </header>
    <nav>
        <ul class="anchor">
            <li><a href="#aboutMe">关于我们</a></li>
            <li><a href="#myIdeal">我们的理想</a></li>
            <li><a href="#travel">旅游篇</a></li>
            <li><a href="#art">艺术篇</a></li>
            <li><a href="#blogWeaper">博客</a></li>
        </ul>
    </nav>
    <div class="coverWeaper">
        <ul id="coverImg">
            <li><img src="./img/cover01.jpg" alt=""></li>
            <li><img src="./img/cover02.jpg" alt=""></li>
            <li><img src="./img/cover03.jpg" alt=""></li>
            <li><img src="./img/cover01.jpg" alt=""></li>
            <li><img src="./img/cover02.jpg" alt=""></li>
            <li><img src="./img/cover03.jpg" alt=""></li>
            <li><img src="./img/cover01.jpg" alt=""></li>
            <li><img src="./img/cover02.jpg" alt=""></li>
            <li><img src="./img/cover03.jpg" alt=""></li>
            <li><img src="./img/cover01.jpg" alt=""></li>
            <li><img src="./img/cover02.jpg" alt=""></li>
            <li><img src="./img/cover03.jpg" alt=""></li>



        </ul>
        <div class="prev">
            <span></span>
        </div>
        <div class="next">
            <span></span>
        </div>
    </div>
    <div class="outer">
        <div id="aboutMeOuter">
        <h2 id="aboutMe">关于我们</h2>
        <p class="aboutMe">
            起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。
        </p>
        <p class="signature"><img src="./img/signature.png" alt=""></p>
    </div>
    <!-- 卡片博客 -->
        <ul id="weaper">
        </ul>
        <div id="sectionBlogButtonWeaper">
            <p class="SBlogToFirst">上一页</p>
            <ul id="sectionBlogButton">

            </ul>

            <p class="SBlogToLast">下一页</p>
        <div class="remindWeaper">
            <input id="SBlogNum" type="text" >
            <button id="buttonGo">Go</button>
            <div id="remind">输入内容不规范</div>
        </div>
        </div>
       
        <!-- myIdeal -->
        <h2 id="myIdeal">我们的信念</h2>
        <div class="idealWeaper" id="idealWeaper">
            <ul class="idealTitle">
                <li>
                    <p>
                        起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。
                    </p>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。
                    </p>
                </li>
                <li class="idealTitleImg"><img src="./img/ideal01.jpg" alt=""></li>
            </ul>
     </div>
    </div>
    <div id="sectionWeaper">
            <ul class="section" id="travel">
                <li><img src="./img/ideal02.jpg" alt=""></li>
                <li class="content inFromRight">
                    <span>旅行篇</span>
                    <h3>旅行和生活的记录</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。
                    </p>
                    <i><a href="#">了解更多</a></i>
                </li>

            </ul>
            <ul class="section" id="art">
                <li class="content flexRight inFromLeft">
                    <span>艺术篇</span>
                    <h3>欧洲艺术见闻录</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。
                    </p>
                    <i><a href="#">了解更多</a></i>
                </li>
                <li><img src="./img/ideal03.jpg" alt=""></li>

            </ul>
            <ul class="section">
                <li><img src="./img/ideal04.jpg" alt=""></li>

                <li class="content inFromRight">
                    <span>艺术篇</span>
                    <h3>最美的是生活的本身</h3>
                    <p>起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。
                    </p>
                    <i><a href="#">了解更多</a></i>
                </li>

            </ul>
     </div>
     <div class="outer">
        <div id="blogWeaper">
            <h2 id="blogTitle">博客</h2>
            <p class="aboutMe">
                起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。起飞页是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。在这里，您仅需花上10分钟便可以完成一个H5响应式网站，您会发现完全不需要编写一行代码，这就是起飞页自助建站的神奇之处。
            </p>
            <div class="blogMainWeaper">
                </div>
                <div class="blogMore" id="blogMore"></div>
            </div>

        </div>
    </div>
    <footer>
       <div class="footerWeaper">
        <div><img src="./img/VEGC-footer.png" alt=""></div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p>Copyright © 2017 个人摄影网站. All rights reserved.</p>
       </div>
       <div id="toTop" class="toTop"></div>
    </footer>
    <script src="./js/index.js"></script>
    <script src="./js/public.js"></script>
</body>

</html>